@import './main.scss';

/* 内容 */
.content {
    clear: both;
}

.tips-wrap {
    background: #fff8f0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.tips {

    p,
    i {
        display: inline-block;
    }

    i {
        vertical-align: middle;
        width: 16px;
        height: 16px;
        margin: 0 auto;
        background: url(../img/login/icon-tips.png);
    }

}



.login-wrap {
    background-color: #C3DDF6;
    height: 475px;
}

.login {
    height: 100%;
    background: url(../img/login/bg.jpg) no-repeat center;
}

.login-form {
    position: relative;
    width: 348px;
    top: 10px;
    background-color: white;
}

.login-tab {
    height: 55px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #f4f4f4;

    span {
        flex: 1;
        font-size: 18px;
        text-align: center;
        color: #666;
        cursor: pointer;

        &.checked {
            font-weight: bold;
            color: #E4393C;
        }
    }

    span:nth-of-type(1) {
        border-right: 1px solid #f4f4f4;
    }
}

/* 二维码登录 */
.login-qr {
    /* display: none; */
    width: 100%;
    position: relative;
}

.qr-wrap {
    position: relative;
    width: 306px;
    height: 173px;
    margin: 15px auto 0;

}

.qr-code {
    width: 155px;
    height: 155px;
    position: absolute;
    padding: 8px;
    border: 1px solid #f4f4f4;
    /*  left: 66.5px; 22.5 */
    /* left: 22.5px; */
    left: 64px;
    transition: left 0.3s;
    text-align: center;
    background: url(../img/login/qr-code.png) no-repeat center;
}

.qr-help {
    display: none;
    position: absolute;
    width: 148px;
    height: 168px;
    transition: diplay 1s;
    background: url(../img/login/phone-orange.png) no-repeat center;
    top: -5px;
    right: -158px;
}

.qr-wrap:hover {
    .qr-code {
        left: 0;
    }

    .qr-help {
        display: block;
    }
}




.qrcode-panel {
    width: 155px;
    @include flx(space-around);
    margin: 18px auto 14px;

    a {
        color: #E4393C;
    }
}

.qr-coagent {
    width: 230px;
    @include flx(space-around);
    margin: 0 auto 25px;
    $wh: 25px;

    li {
        @include flx(flex-start, center);

        i {
            display: inline-block;
            width: $wh;
            height: $wh;
            background: url(../img/login/qr-coagent.png) no-repeat;
        }
    }

    li:nth-of-type(2) i {
        background-position: -27px;
    }

    li:nth-of-type(3) i {
        background-position: -53px;
    }

    em {
        display: inline-block;
        height: $wh;
        line-height: $wh;
        padding-left: 3px;
    }
}

/* 账户登录 */
.login-account {
    display: none;
    width: 306px;
    height: 230px;
    margin: 0 auto;
}

.login-msg {

    height: 18px;
    margin: 5px 0;

    padding-top: 2px;
    border: 1px solid transparent;
}

.msg-err {
    display: none;
    line-height: 16px;
    background-color: #ffebeb;
    color: #E4393C;
    padding-left: 25px;
    background: #ffebeb url(../img/login/pwd-icons-new.png) no-repeat -100px -49px;
}

.form-item {
    position: relative;
    border: 1px solid #bdbdbd;
    height: 38px;
    width: 304px;
    margin-bottom: 20px;

    label {
        float: left;
        height: 38px;
        width: 38px;
        border-right: 1px solid #bdbdbd;
        background: url(../img/login/pwd-icons-new.png) no-repeat;
    }

    input {
        width: 248px;
        height: 18px;
        line-height: 18px;
        border: 0;
        padding: 10px 0 10px 10px;
        outline: 0;
    }
}

.form-item:nth-of-type(2) label {
    background-position-x: -48px;
}

input[type="password"]::-ms-reveal {
    display: none;
}

.clear-btn {
    display: none;
    position: absolute;
    width: 14px;
    height: 14px;
    right: 10px;
    top: 12px;
    background: url(../img/login/pwd-icons-new.png) no-repeat -26px -144px;

    &:hover {
        background-position-x: -51px;
    }
}


.item-forget {
    border: 0;
    height: 18px;

    a {
        display: block;
        width: 48px;

        &:hover {
            text-decoration: underline;
        }
    }
}

.item-login {
    border: 1px solid #cb2a2d;
    background-color: #E4393C;
    margin: 0 auto;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
}